<template>
  <view>
    <video id="video" class="w-full h-469" :src="chapter?.video" :title="chapter?.chapter_name" autoplay
      @timeupdate="onVideoTimeUpdate" @seeked="onVideoEnded" @ended="onVideoEnded" />
    <view class="px-4 pb-25">
      <view class="py-3 c-#333 text-40">{{ chapter?.chapter_name || '' }}</view>
      <view class="mt-2 px-3 py-3 c-#f4af22 text-24 rounded-sm bg-#fef7e8">
        该课程为付费内容，点击购买当前课程解锁全部，或加入会员免费观看线上所有课程~
      </view>
      <!-- 课程详情 -->
      <view class="py-3 u-border-bottom">
        <view class="mt-3 c-#333 text-40 font-semibold">课程详情</view>
        <view class="flex py-3" @click="navigateBack">
          <view class="relative">
            <view class="label-style">会员免费</view>
            <u-image :src="state.data?.cover_image" width="240" height="160" border-radius="12" />
          </view>
          <view class="flex flex-col justify-between ml-2">
            <view class="c-#333 text-28 text-maxline-2">{{ state.data?.class_name || '' }}</view>
            <view class="flex flex-col">
              <view class="c-#b5b5b5 text-24 text-maxline-1">{{ state.data?.desc || '' }}</view>
              <view class="flex mt-1">
                <u-image :src="state.data?.cover_image" width="32" height="32" border-radius="50%" />
                <view class="ml-1 c-#999 text-26">{{ state.data?.teacher_name || '' }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="flex py-3 u-border-bottom">
        <view class="mr-10">
          <view class="c-#666 text-24">课时</view>
          <view class="mt-1 c-#333 text-32 font-semibold">{{ state.data?.chapters_num || 0 }}</view>
        </view>
        <view class="mr-10">
          <view class="c-#666 text-24">在学人数</view>
          <view class="mt-1 c-#333 text-32 font-semibold">{{ state.data?.study_num || 0 }}</view>
        </view>
        <view class="mr-10">
          <view class="c-#666 text-24">总时长</view>
          <view class="mt-1 c-#333 text-32 font-semibold">{{ state.data?.total_duration || '--' }}</view>
        </view>
      </view>
      <view class="py-3">
        <u-image :src="state.data?.teacher_desc" width="686" height="180" border-radius="12" />
      </view>
      <!--课程列表-->
      <view v-for="item in state.data?.chapter" :key="item.id" class="flex mt-3">
        <view class="flex-shrink-0 relative w-160 h-120 rounded-1.5 overflow-hidden">
          <image class="absolute left-0 top-0 w-full h-full" src="/static/images/common/img_share.jpg" />
          <view class="chapter-mask-wrap">
            <image class="w-44 h-44" src="/package_square/static/images/ic_lock.png" />
            <view class="absolute right-8 bottom-6 text-20 text-white">{{ item.duration }}</view>
          </view>
        </view>
        <view class="flex-1 flex flex-col justify-between ml-2">
          <view class="c-#333 text-28 text-maxline-2">{{ item.chapter_name || '' }}</view>
          <view class="flex items-center">
            <view class="flex-1 flex items-center text-24 c-#999">
              <text class="text-26">{{ item.learn_person || 0 }}人学过</text>
              <template v-if="state.data?.class_status != 0">
                <text class="mx-2">|</text>
                <text>已学{{ numFormat(item.progress || 0) }}%</text>
              </template>
            </view>
            <template v-if="item.is_try == 1">
              <view v-if="state.chapterId == item.id" class="flex-shrink-0 btn-try flex items-center c-primary">
                <image class="w-20 h-22 mr-2" src="/package_square/static/images/ic_course_video_playing.png" />
                <view>试看中</view>
              </view>
              <view v-else class="flex-shrink-0 btn-try" @click.stop="onChapterChange(item)">试看</view>
            </template>
          </view>
        </view>
      </view>
    </view>
       <!--底部按钮-->
       <view v-if="!isCourseAvaliable" class="bottom-wrap-16 flex items-center bg-white border-top px-4">
      <view class="flex-1 c-#FF513A text-36">￥{{ numFormat(state.data?.price || 0) }}</view>
      <view class="flex flex-shrink-0">
        <view class="button-buy" @click="navigate(`/package_square/pages/course/purchase?id=${state.id}`)">购买课程</view>
        <view class="button-add ml-2" @click="navigate('/package_user/pages/vip/add')">加入会员</view>
      </view>
    </view>
    <u-modal v-model="state.showTipModal" :show-title="false" show-cancel-button
      confirm-text="加入会员" cancel-text="购买课程" confirm-color="#F4AF22" cancel-color="#F4AF22" @confirm="onTipConfirm(true)"
      @cancel="onTipConfirm(false)">
      <view class="relative">
        <view class="absolute top-0 right-0 p-3" @click="state.showTipModal = false">
          <u-icon name="close" color="#999" size="28" />
        </view>
        <view class="py-3 text-32 c-#333 text-center font-semibold">温馨提示</view>
        <view class="px-5 pb-5 text-28 c-#333 text-center">该课程为付费内容，如需观看完整课程，请加入会员或购买课程</view>
      </view>
    </u-modal>
  </view>
</template>

<script setup>
import { numFormat } from '@/common/util/format'
import { navigateBack,navigate } from '@/common/util/uni'
import { getOnlineCourseDetail } from '@/common/http/module/square';

const videoCtx = ref()

const state = reactive({
  id: '',
  data: '',
  chapterId: '',
  showTipModal: false
});

const chapter = computed(() => state.data?.chapter?.find(item => item.id == state.chapterId))

function loadData() {
  getOnlineCourseDetail(state.id).then((res) => {
    state.data = res.data;
  });
}

function onChapterChange(item) {
  videoCtx.value?.stop()
  state.chapterId = item.id
  videoCtx.value?.play()
}

// function onVideoTimeUpdate(e) {
//   const { currentTime } = e.detail
//   if (currentTime > 5) {
//     videoCtx.value?.stop()
//     state.showTipModal = true
//   }
// }

function onVideoEnded(){
  state.showTipModal = true
}

function onTipConfirm(confirm) {
  const url = confirm ? `/package_user/pages/vip/add` : `/package_square/pages/course/purchase?id=${state.id}`
  uni.redirectTo({ url })
}

onMounted(() => videoCtx.value = uni.createVideoContext('video'))

onLoad((options) => {
  state.id = options.id;
  state.chapterId = options.chapterId
  loadData();
});
</script>

<style lang="scss" scoped>

.button-buy {
  width: 220rpx;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  border: 2rpx solid #f4af22;
  font-size: 28rpx;
  color: #f4af22;
}

.button-add {
  width: 220rpx;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  background-color: #f4af22;
  color: #fff;
  font-size: 28rpx;
}
.label-style {
  position: absolute;
  z-index: 90;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx 0px 12rpx 0rpx;
  background-color: #f4af22;
}

.chapter-mask-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.btn-try {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48rpx;
  padding: 0 12rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  border: 2rpx solid #f4af22;
  color: #f4af22;
}
</style>